import {ClassType, IconConfig, SeleteData, TreeData, Dictionary, DateFormat, DatePicker} from '@/api/config'
import {FormRules} from 'element-plus'
import {CSSProperties, PropType} from 'vue'
import { Dayjs } from 'dayjs'

//按钮
export const searchButtonName = 'search'

//操作按钮类型
export type ButtonType='noraml'|'link'|'icon'

//操作按钮
export interface BaseButton{
  code:string //点击回调返回值
  label:string //名称
  type?:ButtonType //类型
  disabled?:boolean //是否禁用
  style?:CSSProperties //内联样式
  class?:ClassType //class样式绑定
}


export type ElButtonType='primary'|'success'|'info'|'warning'|'danger'|'default'
//一般按钮
export interface NoramlButton extends BaseButton{
  type:'noraml'
  elType?:ElButtonType
  iconConfig?:IconConfig
  plain?:boolean //是否为朴素按钮
}

//连接按钮
export interface LinkButton extends BaseButton{
  type:'link'
}

//ICon按钮
export interface IconButton extends BaseButton{
  type:'icon'
  elType?:ElButtonType
  plain?:boolean //是否为朴素按钮
  iconConfig:IconConfig
}

//操作按钮
export type OperButton= NoramlButton|LinkButton|IconButton

//搜索表单项类型
export type SearchFormItemType='slot'|'input'|'inputNumber'|'selete'|'seleteV2'|'seleteTree'|'radio'|'date'|'antdDate'|'antdRange'

//搜索表单项配置
export interface BaseSearchFormItem{
  label:string //标签
  type:SearchFormItemType //类型
  prop:string //表单prop
  min?:number //最小值
  max?:number //最大值
  placeholder?:string|Array<string> //提示
  notClearable?:boolean //不能清空
  style?:CSSProperties //内联样式
  class?:ClassType //Class样式
}

const defaultData = {
  'input':null,
  'inputNumber':undefined,
  'selete':undefined,
  'seleteV2':undefined,
  'seleteTree':null,
  'radio':undefined,
  'date':null
}

//插槽
export interface SearchFormSlot extends BaseSearchFormItem{
  type:'slot',
  slotName:string //插槽名称
}

//输入框
export interface SearchFormInput extends BaseSearchFormItem{
  type:'input'
  suffixIcon?:string
  suffixText?:string|number
  placeholder?:string
  enterSubmit?:boolean //是否回车提交表单 废弃
  autofocus?:boolean //自动聚焦
  maxlength?:number//输入长度
  disabled?:boolean//是否禁用
}

//数字输入框
export interface SearchFormInputNumber extends BaseSearchFormItem{
  type:'inputNumber'
  step:number //步进
  placeholder?:string
  max?:number //最大值
  min?:number //最小值
  notStrictly?:boolean //不按照严格进步模式
  enterSubmit?:boolean //是否回车提交表单 废弃
  autofocus?:boolean //自动聚焦
}

//选择器
export type RemoteMethod=(query:string)=>void
//自定义搜索
export interface RemoteConfig{
  remote:boolean //开启自定义搜索
  remoteMethod:RemoteMethod|null //加载函数
  loading:boolean //加载
}
export interface SearchFormSelete extends BaseSearchFormItem{
  type:'selete'
  seleteData:Array<SeleteData> //下拉数据
  placeholder?:string
  changeSubmit?:boolean //是否选择后提交表单
  multiple?:boolean //是否为多选模式
  filterable?:boolean //是否带搜索功能
  remoteConfig?:RemoteConfig //自定义搜索配置
}

//虚拟选择器 数据过多(上千条时推荐使用)
export interface SearchFormSeleteV2 extends BaseSearchFormItem{
  type:'seleteV2'
  seleteData:Array<SeleteData> //下拉数据
  placeholder?:string
  changeSubmit?:boolean //是否选择后提交表单
  multiple?:boolean //是否为多选模式
  filterable?:boolean //是否带搜索功能
  remoteConfig?:RemoteConfig //自定义搜索配置
}

//树选择器
export interface SearchFormSeleteTree extends BaseSearchFormItem{
  type:'seleteTree'
  seleteData:TreeData|Array<TreeData> //数据
  placeholder?:string
  changeSubmit?:boolean //改变提交
  multiple?:boolean //是否为多选模式
  showCheckbox?:boolean //显示复选框
  checkStrictly?:boolean //是否为严格模式
}

//单选
export interface SearchFormRadio extends BaseSearchFormItem{
  type:'radio',
  value:string|number|undefined
  seleteData:Array<SeleteData> //选择数据 一般为两个
  placeholder?:string
  changeSubmit?:boolean //改变提交
}

//日期时间选择器 TODO
export interface SearchFormDate extends BaseSearchFormItem{
  type:'date'
  dateType:'year'|'month'|'date'|'week'|'datetime'|'datetimerange'|'daterange' //显示类型
  valueFormat:'yyyy-MM-dd'|'yyyy-MM-dd HH:mm:ss'|'yyyy-MM-dd HH:mm' //显示在输入框中的格式
  placeholder?:string
  changeSubmit?:boolean //是否回车提交表单
  defaultTime?:string //选中日期后的默认具体时刻
  rangeSeparator?:string //选择范围时的分隔符
  startPlaceholder?:string //范围选择时开始日期的占位内容
  endPlaceholder?:string //范围选择时结束日期的占位内容
}

export type DisabledDate=(current:Dayjs)=>boolean
export type OpenChange=(open:boolean)=>void
export type CalendarChange=(dates: [string, string])=>void
//antd日期选择器
export interface SearchFormAntdDate extends BaseSearchFormItem{
  type:'antdDate'
  placeholder?:string
  dateFormat:DateFormat //日期格式
  datePicker?:DatePicker //范围选择器
  showTime?:boolean //显示时间
  changeSubmit?:boolean //确认后是否立即触发验证
  disabledDate?:DisabledDate //禁用时间
  openChange?:OpenChange //弹出或关闭回调
  calendarChange?:CalendarChange//待选日期发生变化
}
//antd日期范围选择器
export interface SearchFormAntdRange extends BaseSearchFormItem{
  type:'antdRange'
  dateFormat:DateFormat //日期格式
  placeholder?:Array<string>
  datePicker?:DatePicker //范围选择器
  showTime?:boolean //显示时间
  changeSubmit?:boolean //确认后是否立即触发验证
  disabledDate?:DisabledDate //禁用时间
  openChange?:OpenChange
  calendarChange?:CalendarChange//待选日期发生变化
}


//搜索表单项
export type SearchFromItem=SearchFormSlot|SearchFormInput|SearchFormInputNumber|SearchFormSelete|SearchFormSeleteV2|SearchFormSeleteTree|SearchFormRadio|SearchFormDate|SearchFormAntdDate|SearchFormAntdRange

//搜索表单配置
export interface SearchForm{
  fromItems:Array<SearchFromItem>
}



//搜索表单按钮类型
export type SearchButtonType='search'|'clear'|'inputsearch'
export interface BaseSearchButton{
  type:SearchButtonType
}

export interface NormalSearchButton{
  type:'search'|'clear'
}

export interface InputSearchButton extends BaseSearchButton{
  type:'inputsearch'
  placeholder?:string,
  width?:number,
  autofocus?:boolean,
  value:string|null
}

export type SearchButton = NormalSearchButton|InputSearchButton

//搜索表单按钮配置
export interface SearchButtons{
  buttons:Array<SearchButton>,
}
const defaultSerchButtons:Array<SearchButton> = [{type:'search'}, {type:'clear'}]
export type SearchFromJustify= 'flexEnd'|'flexStart'
//操作按钮和表单栏的相对位置 bt 下上 lr 左右
export type RelativePosition= 'bt'|'lr'

export const headerProps = {
  //操作按钮列表
  operButtons:{
    type:Array as PropType<Array<OperButton>>,
    default:() => []
  },
  //搜索表单项
  searchFormItems:{
    type:Array as PropType<Array<SearchFromItem>>,
    default:() => []
  },
  //表单项从靠左还是靠右
  searchFromJustify:{
    type:String as PropType<SearchFromJustify>,
    default:'flexEnd'
  },
  //是否自动填充剩余宽度
  searchFromFull:{
    type:Boolean,
    default:false
  },
  //表单label长度
  labelWidth:{
    type:Number,
    default:70
  },
  //表单操作按钮列表
  searchButtons:{
    type:Array as PropType<Array<SearchButton>>,
    default:() => defaultSerchButtons
  },
  //表单验证
  searchRules:{
    type:Object as PropType<FormRules>,
    default:() => { return {} }
  },
  //表单数据
  searchFormData:{
    type:Object as PropType<Dictionary<any>>,
    default:() => { return {} }
  },
  //加载状态
  showLoading:{
    type:Boolean,
    default:false
  },
  //操作按钮和表单栏的相对位置
  relativePosition:{
    type:String as PropType<RelativePosition>,
    default:'bt'
  },
  //强制显示按钮
  forceShowButton:{
    type:Boolean,
    default:false
  },
  //提交前清除空数据
  clearEmpty:{
    type:Boolean,
    default:true
  }
}

export const headerEmits = ['formSubmit', 'formClear', 'operation']
